<template>
<div class="zt">
    <!-- 内容区导航 -->
    <div class="ZTnav">
        <div>
            <div class="ZTinpt">
                <span>升级包名称</span>
                <el-input placeholder="请输入" v-model="searchCondition.packageName"></el-input>
            </div>

            <div class="ZTinpt">
                <span>固件版本</span>
                <el-select v-model="searchCondition.updateVersion" placeholder="请选择">
                    <el-option v-for="item in packageList" :key="item.version" :label="item.version" :value="item.version">
                    </el-option>
                </el-select>
            </div>
            <div class="ZTinpt">
                <span>导入时间</span>
                <el-date-picker v-model="searchCondition.time" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间">
                </el-date-picker>
            </div>
            <div class="xzgw_btn">
                <el-button icon="el-icon-search" size="mini" @click="conditionSearch(1,numVal)">查询</el-button>
                <el-button icon="el-icon-refresh-right" size="mini" @click="resetCondition">重置</el-button>
            </div>
        </div>
    </div>
    <div class="an_box">
        <el-button @click="batchDelete()" icon="el-icon-delete" size="mini">批量删除</el-button>
        <el-button @click="pl_bianji()" icon="el-icon-edit-outline" size="mini">导入升级包</el-button>
    </div>
    <!-- 内容区 -->
    <div class="ZTcontent">
        <!-- el表格 -->
        <div class="sbzt_table">
            <el-table :header-cell-style="{background:'#EBF1FC',color:'#606266'}" :data="pgDetails" border stripe style="width: 100%" @selection-change="selectChange">
                <el-table-column align="center" type="selection" width="60"></el-table-column>
                <el-table-column prop="id" label="序号" width="100">
                </el-table-column>
                <el-table-column prop="packageName" label="升级包名称">
                </el-table-column>
                <el-table-column prop="packageType" label="升级包类型">
                </el-table-column>
                <el-table-column prop="version" label="固件版本">
                </el-table-column>
                <el-table-column prop="packageSize" label="文件大小(MB)">
                </el-table-column>
                <el-table-column prop="importTime" label="导入时间">
                </el-table-column>
                <el-table-column align="center" fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' @confirm="pgDelete([scope.row.packageId])" icon="el-icon-info" icon-color="red" :title="'确定删除吗？'">
                            <el-button slot="reference" type="text" size="small" style="color:#F9243D">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="ZTfooter">
            <span>共{{ infoTotal }}条</span>
            <el-select v-model="numVal" @change="pageTotalChange" placeholder="请选择">
                <el-option v-for="item in num" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-pagination layout="prev, pager, next" :total="this.totalPage" :current-page="currenPage" :page-size="this.pageSize" @current-change="handleCurrentChange">
            </el-pagination>
            <div class="goPage">
                <span>前往</span>
                <el-input oninput="value=value.replace(/[^\d]/g,'')" v-model="pageNumber" placeholder="1"></el-input>
                <span>页</span>
                <el-button class="goPageBtn" type="goon" @click="goPage">确定</el-button>
            </div>
        </div>
    </div>
    <el-dialog :visible="scShow" width="412px" :before-close="scHide">
        <div slot="title" class="delete_header">
            <div class="delete_title">
                提示
            </div>
        </div>
        <div class="delete_content">
            <div class="delete_text">
                <span class="text_warning"></span>
                <div class="text_text">是否删除所选升级包 ？</div>
            </div>
        </div>
        <el-button @click="confirmBatchDelete()" class="delete_confirm">删除</el-button>
        <el-button @click="cancelBatchDelete()" class="delete_cancel">取消</el-button>
    </el-dialog>
    <!-- <transition name="el-fade-in-linear">
        <div class="plsc" v-show="scShow">
            <span class="quxiao" @click="scHide()"></span>
            <div class="plsc_nr">
                <span>是否删除所选升级包？</span>
            </div>
            <button @click="scHide()" class="scan">删除</button>
            <button @click="scHide()" class="qxan">取消</button>
        </div>
    </transition> -->
    <el-dialog :visible="isopen_pl" width="432px" :before-close="hide_pl" class="import_dialog">
        <div slot="title" class="import_header">
            <div class="import_title">升级包导入</div>
            <!-- <span @click="hide_pl()"></span> -->
        </div>
        <div>
            <div class="plneicheng">
                <span></span>
                <div class="ssxm">
                    <div class="sjblx">
                        <span>升级包类型</span>
                        <el-select v-model="uploadPackage.packageType" placeholder="请选择">
                            <el-option v-for="item in sjblx" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    
                    <div class="gjbb">
                        <span>固件版本</span>
                        <el-select v-model="uploadPackage.version" allow-create :filterable="true" placeholder="请输入">
                            <el-option v-for="item in gjbbsr" :key="item.value" :label="item.label" :value="item.value" :disabled="true">
                            </el-option>
                        </el-select>
                    </div>
                    <!-- <div class="gjbb" style="margin-top: 15px;">
                        <el-input class="gjmc" placeholder="请输入内容" v-model="uploadPackage.version">
                            <span slot="prepend" style="padding: 0 0px" >固件版本</span>
                        </el-input>
                    </div> -->
                </div>
                <el-upload ref="upload" class="upload-demo" drag :http-request="uploadFile" action="" :show-file-list="false" :auto-upload="true" multiple>
                    <div class="upload-text">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload-text-b">将文件拖到此处，或点击上传</div>
                        <div class="el-upload-text">支持上传.dav文件</div>
                    </div>
                </el-upload>
            </div>
        </div>

    </el-dialog>
</div>
</template>

<script>
export default {
    data() {
        return {
            num: [
                {
                    value: 20,
                    label: "20条/页",
                },
                {
                    value: 50,
                    label: "50条/页",
                },
                {
                    value: 100,
                    label: "100条/页",
                },
            ],
            value: "",
            value1: "",
            ssxmVal: "",
            fileList: [],
            changedis: true,
            numVal: 20,
            pageNumber: "",
            gjbbsrVal: "",
            gjbbsr: [{
                label: "示例:sos升级1.2",
                value: "sos升级1.2",
            }],
            sjbmc: "",
            gjbbsearch: "",
            infoTotal: 100,
            currenPage: 1,
            totalPage: 100,
            pageSize: 10,
            pgDetails: [],
            selectCell: [],
            curSelect: [],
            uploadPackage: {
                packageType: '',
                version: '',
                file: '',
            },
            searchCondition: {
                packageName: "",
                version: "",
                time: [],
            },
            packageList: [],
            statusList: [{
                    value: 16,
                    label: "在线"
                },
                {
                    value: 17,
                    label: "离线"
                },
            ],
            sjblx: [{
                    value: "主机",
                    label: "主机"
                },
                {
                    value: "摄像头",
                    label: "摄像头"
                },
            ],
            detailDeviceInfo: {
                proName: "",
                hostName: "",
                serialNo: "",
                mac: "",
                manufacturer: "",
                installPosition: "",
                protocalType: "",
                firmwareVersion: "",
                hostIp: "",
                frontCameraId: "",
                MiddleCameraId: "",
                RearCameraId: "",
            },
            detailShow: false,
            scShow: false,
            isopen_pl: false,
        };
    },
    created() {
        this.changePageList(1, this.numVal);
        this.getPackList();
    },
    methods: {
        getPackList() {
            let _this = this;
            _this.$axios.post("/upgrade/checkPackageVersion")
                .then((res) => {
                    let data = res.data.data;
                    _this.packageList = [];
                    data.forEach(element => {
                        _this.packageList.push({
                            packageName: element.packageName,
                            version: element.version,
                            packageUrl: element.packageUrl,
                            importTime: element.importTime
                        })
                    });
                })
                .catch()
        },
        uploadFile(params) {
            let _this = this;
            let fd = new FormData();
            if (_this.uploadPackage.packageType != null && _this.uploadPackage.version != null) {
                fd.append('file', params.file);
                fd.append('packageType', _this.uploadPackage.packageType)
                fd.append('version', _this.uploadPackage.version)
                _this.$axios.post("/upgrade/export", fd).then((res) => {
                    _this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    _this.isopen_pl = false;
                    _this.changePageList(1, this.numVal);
                }).catch()
            } else {
                _this.$message.error("请输入完整信息");
            }

        },
        // 批量导入自定义样式
        upchange(file, filelist) {
            var xiaoshi = document.querySelector('.el-upload-dragger');
            xiaoshi.style.height = "50px";
            var xiaoshitextb = document.querySelector('.el-upload-text-b');
            xiaoshitextb.innerHTML = "上传文件";
            var xiaoshitext = document.querySelector('.el-upload-text');
            xiaoshitext.style.display = 'none';
            var xiaoshiicon = document.querySelector('.el-icon-upload');
            xiaoshiicon.style.position = 'relative';
            xiaoshiicon.style.right = '60px';
            xiaoshiicon.style.top = '22px';
            var textlist = document.querySelector('.el-upload-list');
            textlist.style.border = '3px solid rgba(226,226,226)';
            textlist.style.borderRadius = '5px';
            textlist.style.height = '150px';
            textlist.style.background = 'rgb(249,249,249)';
            var cancel = document.querySelector('.cancel');
            cancel.style.display = "block"
            var confirm = document.querySelector('.confirm');
            confirm.style.display = "block"
        },
        // beforeAvatarUpload(file) {
        //     const isText = file.type === 'application/vnd.ms-excel';
        //     const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        //     if (!isText && !isTextComputer) {
        //         this.$message.warning('请上传excel格式文件！');
        //     };
        //     return (isText || isTextComputer);
        // },
        resetCondition() {
            let _this = this;
            _this.searchCondition = {
                packageName: "",
                version: "",
                time: [],
                startTime: "",
                endTime: "",
            };
            _this.changePageList(1, _this.numVal);
        },
        conditionSearch(page, limit) {
            let _this = this;
            let startTime = "",
                endTime = "";
            if (_this.searchCondition.time.length > 0) {
                startTime = _this.searchCondition.time[0];
                endTime = _this.searchCondition.time[1]
            }
           
            _this.$axios.post("/upgrade/package/condition/" + page + "/" + limit,{
                    ..._this.searchCondition,
                    startTime: startTime,
                    endTime: endTime
            })
                .then((res) => {
                    let data = res.data.data;
                    let records = data.records;
                    _this.infoTotal = data.total;
                    _this.totalPage = _this.infoTotal;
                    _this.pageSize = _this.numVal;
                    _this.pgDetails = [];
                    for (let i = 0; i < records.length; i++) {
                        let pg = records[i];
                        this.pgDetails.push({
                            id: (page - 1) * limit + 1 + i,
                            packageId: pg.packageId,
                            packageName: pg.packageName,
                            packageType: pg.packageType,
                            version: pg.version,
                            packageSize: pg.packageSize,
                            importTime: pg.importTime,
                            packageUrl: pg.packageUrl,
                            startTime: pg.startTime,
                            endTime: pg.endTime,
                        });
                    }
                }).catch()
        },
        showDetailPage(deviceId) {
            let _this = this;
            _this.$axios.get("/device/detail?deviceId=" + deviceId)
                .then((res) => {
                    let deviceInfo = res.data.data;
                    _this.detailDeviceInfo = {
                        deviceId: deviceInfo.deviceId,
                        proName: deviceInfo.proName,
                        hostName: deviceInfo.hostName,
                        serialNo: deviceInfo.serialNo,
                        mac: deviceInfo.mac,
                        manufacturer: deviceInfo.manufacturer,
                        installPosition: deviceInfo.installPosition,
                        protocalType: deviceInfo.protocalType,
                        firmwareVersion: deviceInfo.firmwareVersion,
                        hostIp: deviceInfo.hostIp,
                        frontCameraId: deviceInfo.frontCameraId,
                        middleCameraId: deviceInfo.middleCameraId,
                        rearCameraId: deviceInfo.rearCameraId,
                    }
                    _this.detailShow = true;
                }).catch()
        },
        detailHide() {
            let _this = this;
            _this.detailShow = false;
        },
        scHide() {
            let _this = this;
            _this.scShow = false;
        },
        scShow_bianji() {
            let _this = this;
            _this.scShow = true;
        },
        hide_pl() {
            let _this = this;
            _this.isopen_pl = false;
        },
        pl_bianji() {
            let _this = this;
            _this.isopen_pl = true;
        },
        handleCurrentChange(val) {
            this.currenPage = val;
            this.changePageList(val, this.numVal);
        },
        pageTotalChange(val) {
            this.totalPage = Math.ceil(this.infoTotal / val);

            this.changePageList(1, val);
        },
        goPage(){
        // console.log("this.totalPage",this.totalPage,this.pageSize,this.pageNumber,this.currenPage);
            if(this.totalPage<=this.pageSize){
                this.pageNumber =  this.currenPage = 1;
            }else{
            //判断一共有多少页
            let page = Math.ceil(this.totalPage/this.pageSize);
            this.pageNumber = this.pageNumber>page?page:this.pageNumber;
            this.currenPage = Number(this.pageNumber) ;
            }
            this.conditionSearch(this.pageNumber,this.numVal)
        },
        selectChange(val) {
            this.curSelect = [];
            val.forEach(e => {
                console.log(e)
                this.curSelect.push(e.packageId);
            })
        },
        batchDelete() {
            let _this = this;
            if (_this.curSelect.length == 0) {
                _this.$message.error("请选择需要删除的升级包！")
            } else {
                _this.scShow = true;
            }
        },
        cancelBatchDelete() {
            let _this = this;
            this.$confirm('确定取消删除吗？')
                .then(e => {
                    _this.scShow = false;
                })
                .catch(e => {});
        },
        confirmBatchDelete() {
            let _this = this;
            _this.$axios.post("/upgrade/remove", _this.curSelect)
                .then((res) => {
                    console.log('删除成功');
                    _this.scShow = false;
                    _this.changePageList(1, _this.numVal);
                })
                .catch(e => {
                    console.log(e);
                })
        },
        pgDelete(val) {
            let _this = this;
            _this.$axios.post("/upgrade/remove", val)
                .then((res) => {
                    console.log('删除成功');
                    _this.changePageList(1, _this.numVal);
                })
                .catch(e => {
                    console.log(e);
                })
        },
        changePageList(page, limit) {
            this.$axios
                .post("/upgrade/package/" + page + "/" + limit)
                .then((res) => {
                    let _this = this;
                    let data = res.data.data;
                    let records = data.records;
                    this.infoTotal = data.total;
                    this.totalPage = this.infoTotal;
                    this.pageSize = this.numVal;
                    this.pgDetails = [];
                    for (let i = 0; i < records.length; i++) {
                        let pg = records[i];
                        this.pgDetails.push({
                            id: (page - 1) * limit + 1 + i,
                            packageId: pg.packageId,
                            packageName: pg.packageName,
                            packageType: pg.packageType,
                            version: pg.version,
                            packageSize: pg.packageSize,
                            importTime: pg.importTime,
                            packageUrl: pg.packageUrl,
                            startTime: pg.startTime,
                            endTime: pg.endTime,
                        });
                    }
                    //更新列表
                     _this.changePageList(1, _this.numVal);
                })
                .catch();
        },
        exportTable() {
            let _this = this;
            _this.$axios({
                    method: "post",
                    url: "device/export",
                    responseType: 'blob'
                })
                .then((res) => {
                    const filename = res.headers["content-disposition"];
                    const blob = new Blob([res.data]);
                    var downloadElement = document.createElement("a");
                    var href = window.URL.createObjectURL(blob);
                    downloadElement.href = href;
                    downloadElement.download = decodeURIComponent(filename.split("filename=")[1]);
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement);
                    window.URL.revokeObjectURL(href);
                })
                .catch((e) => {
                    console.log(e);
                })
        }
    },
};
</script>

<style scoped>
.xzgw_btn>button:nth-child(2) {
    border: 1px solid #666666;
    color: #666666;
    font-size: 14px;
    line-height: 18px;
}

.xzgw_btn>button:nth-child(1) {
    border: 1px solid #3C74E3;
    color: #ffffff;
    background: #3C74E3;
    font-size: 14px;
    line-height: 18px;
}

.xzgw_btn {
    float: right;
    margin-right: 16px;
    margin-top: 50px;
}

.an_box>button:nth-child(1) {
    border: 1px solid #FF6663;
    color: #FF6663;
    font-size: 14px;
    line-height: 18px;
}

.an_box>button:nth-child(2) {
    border: 1px solid #3C74E3;
    color: #3C74E3;
    font-size: 14px;
    line-height: 18px;
}

.an_box {
    float: right;
    margin-bottom: 10px;
    margin-right: 16px;
    margin-top: 20px;
}

.sjblx>span {
    margin-right: 7px;
}

.gjbb>span {
    margin-right: 20px;
}

.gjbb>span,
.sjblx>span {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: #666666;
    opacity: 1;
}

.gjbb>span::before,
.sjblx>span::before {
    content: "*";
    color: red;
}

/* 批量管理 */
.gjbb_nr {
    width: 200px !important;
    margin-left: 15px;
}

.gjbb {
    margin-top: 10px;
}

.piliang {
    position: fixed;
    top: 200px;
    left: 800px;
    width: 392px;
    height: 420px;
    border: #f5f5f5 solid 1px;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.piliang>>>.cancel {
    position: absolute;
    width: 80px;
    height: 36px;
    background: white;
    border-radius: 4px;
    border-width: 1px;
    border-color: #3c74e3;
    /* border: none; */
    color: #3C74E3;
    font-size: 14px;
    right: 116px;
    bottom: 20px;
    display: none;
}

.piliang>>>.confirm {
    position: absolute;
    width: 80px;
    height: 36px;
    background: #3c74e3;
    border-radius: 4px;
    border: none;
    color: #ffffff;
    font-size: 14px;
    right: 20px;
    bottom: 20px;
    display: none;
}

.delete_header {
    height: 48px;
    /* background-color: #F5F5F5; */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    align-items: center;
    display: flex;
    /* margin-bottom: 20px; */
}

.delete_header .delete_title {
    position: relative;
    font-size: 16px;
    left: 20px;
    color: rgba(0, 0, 0, 0.88);
    font-family: Arial;
    font-weight: bold;
}

.delete_content {
    height: 128px;
    width: 100%;
}

.delete_text {
    position: relative;
    /* right: 40px; */
    top: 16px;
    left: 128px;
}

.text_warning {
    position: absolute;
    height: 16px;
    width: 16px;
    background: url(/static/img/prompt-filling.png) no-repeat;
    background-size: 16px;
    /* background-position: 14px 10px; */
}

.text_text {
    margin-left: 16px;
}

.delete_cancel {
    text-align: center;
    width: 80px;
    height: 36px;
    color: #3C74E3;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    background-color: #FFFFFF;
    position: absolute;
    bottom: 20px;
    right: 136px;
}

.delete_confirm {
    text-align: center;
    width: 80px;
    height: 36px;
    color: #FFFFFF;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    background-color: #3C74E3;
    position: absolute;
    bottom: 20px;
    right: 40px;
}

/deep/ .el-dialog__header {
    padding: 0;
    transition: all .5s ease-in-out;
}

/deep/ .el-dialog {
    border-radius: 8px;
}

/deep/ .el-dialog__body {
    padding-top: 0;
}

.import_header {
    height: 48px;
    background-color: #F5F5F5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    align-items: center;
    display: flex;
    /* margin-bottom: 20px; */
}

.import_header .import_title {
    position: relative;
    font-size: 16px;
    left: 20px;
    color: rgba(0, 0, 0, 0.88);
    font-family: Arial;
    font-weight: bold;
}

/deep/ .el-upload-dragger {
    top: -10px;
    width: 352px;
    height: 224px;
}

/deep/ .upload-text {
    position: relative;
    top: calc(50% - 40px);
    left: calc(50% - 141px);
    height: 80px;
    width: 282px;
}

/deep/ .el-upload-text-b,
/deep/ .el-icon-upload {
    color: #3C74E3 !important;
}

/deep/ .el-icon-upload {
    line-height: 32px !important;
    margin: 0px !important;
    font-size: 32px !important;
}

/deep/ .el-upload-text-b {
    top: 8px;
    font-size: 14px !important;
    font-family: "PingFang SC";
}

/deep/ .el-upload-text {
    font-size: 12px !important;
    color: rgba(0, 0, 0, 0.4);
}

/deep/ .el-form-item__label:before {
    margin: 0 !important;
    color: #F9243D !important;
}

/deep/ .el-form-item__error {
    color: #F9243D;
    font-size: 6px;
    line-height: 0.1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 0;
}

.upload-demo /deep/ .el-upload-list__item {
    font-size: 22px;
    background: rgb(249, 249, 249);
    border-bottom: 3px solid rgba(226, 226, 226);
    position: relative;
    top: -10px;
}

.piliang:hover {
    display: block;
}

.piliang>div:nth-child(1) {
    height: 48px;
    font-size: 16px;
    padding-left: 20px;
    font-family: "PingFang SC";
    font-weight: 600;
    color: rgba(0, 0, 0, 0.88);
    line-height: 48px;
    align-items: center;
    background-color: #f5f5f5;
}

.piliang>div:nth-child(1)>span:nth-child(2) {
    position: absolute;
    background: url(/static/img/close.png) no-repeat;
    width: 16px;
    height: 16px;
    right: 20px;
    top: 18px;
    cursor: pointer;
}

.piliang>div>span:nth-child(2) {
    background: url(/static/img/piliang.png) no-repeat;
    background-size: 32px 23.97px;
    background-position: 32px 32px;
}

.plneicheng {
    margin: 20px;
    width: 352px;
    height: 282px;
    /* border: #dddddd dashed 1px; */
    position: relative;
}

.ssxm {
    margin-bottom: 20px;
}

.qxan {
    margin-left: 5%;
}

.scan {
    margin-left: 32%;
}

.plsc>button {
    cursor: pointer;
    width: 80px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    font-size: 14px;
    margin-top: 10%;
    background: #fff;
}

.plsc_nr {
    margin-top: 12%;
    margin-left: 36%;
}

.plsc {
    width: 500px;
    height: 200px;
    background: #fff;
    position: fixed;
    left: 40%;
    top: 35%;
    z-index: 999;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5) !important;
}

/* 点击详情样式 */
.deviceDetail {
    width: 1037px;
    height: 510px;
    background: #fff;
    position: fixed;
    left: 30%;
    top: 15%;
    z-index: 999;
    /* border: 1px solid #000;*/
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5) !important;
}

/deep/ .el-descriptions__title {
    position: relative;
    left: 20px;
}

/deep/ .el-descriptions__header {
    height: 48px;
    background-color: #F5F5F5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/deep/ .el-descriptions__table {
    position: relative;
    left: 40px !important;
    width: calc(100% - 80px) !important;
}

/deep/ .el-descriptions-item__cell {
    padding-left: 16px !important;
    border: 1px solid #DDDDDD !important;
}

/deep/ .el-descriptions-item__label {

    background-color: #EBF1FC !important;
    font-size: 14px;
    color: #666666 !important;
    width: 12.5%;
}

/deep/ .el-descriptions-item__content {
    color: black;
    width: 37.5%;
}

/* 右上角小按钮 */
.quxiao {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 20px;
    right: 16px;
    background: url(/static/img/close_b.png) no-repeat;
    background-size: 16px;
    cursor: pointer;
}

/* 内容区底部样式 */
.goPage>button:hover {
    cursor: pointer;
}

.goPage>button {
    width: 60px;
    height: 30px;
    background: #3c74e3;
    border-radius: 4px;
    border: none;
    color: #ffffff;
}

.goPage>span:nth-of-type(2) {
    padding-left: 48px;
    padding-right: 8px;
}

.goPage>span:nth-of-type(1) {
    padding-right: 8px;
}

.ZTfooter>.goPage {
    position: absolute;
    right: 10px;
    top: 10px;
}

.goPage>>>.el-input {
    width: 0 !important;
}

.goPage>.el-input>>>.el-input__inner {
    width: 40px !important;
    height: 30px !important;
    padding: 0 5px !important;
}

.el-pagination {
    position: absolute;
    right: 190px;
    top: 10px;
}

.ZTfooter>.el-select>>>.el-input__icon {
    line-height: 30px !important;
}

.ZTfooter>.el-select>>>.el-input__inner {
    width: 100px;
    height: 30px;
}

.ZTfooter>span:nth-of-type(1) {
    margin-right: 16px;
}

.ZTfooter {
    height: 44px;
    display: flex;
    align-items: center;
    border-top: 1px solid #cccccc;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    padding: 0 16px;
    margin-top: 4px;
    position: relative;
}

.ZT_bg {
    background: #f5f5f5;
}

.online {
    background: url(../../../static/img/online.png) no-repeat;
    background-size: 15px;
    color: #16a951;
    background-position: 0px 3px;
}

.offline {
    background: url(../../../static/img/off-line.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

/* 设备状态表格 */
.ZTcontent {
    height: calc(100% + 28px);
    background-color: #fff;
    margin-top: 8px;
    padding: 16px 16px 0 16px;
    box-sizing: border-box;
}

/* 查询按钮 */
/* .ZTnav button:nth-of-type(2) {
    color: #fff;
    background:  #3c74e3;
    background-size: 15px 15px;
    background-position: 14px 10px;
    padding-left: 1px;
}

.ZTnav button:nth-of-type(1) {
    background:  #fff;
    background-size: 15px 15px;
    background-position: 14px 10px;
    padding-left: 1px;
}
.ZTnav button:nth-of-type(3) {
    color: #fff;
    background: url(/static/img/serch.png) no-repeat #3c74e3;
    background-size: 15px 15px;
    background-position: 14px 10px;
}
.ZTnav button:nth-of-type(4) {
    color: #fff;
    background: url(/static/img/serch.png) no-repeat #3c74e3;
    background-size: 15px 15px;
    background-position: 14px 10px;
}
.ZTnav button {
    float: right;
    width: 100px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    margin: 40px 8px 16px 8px;
    padding-left: 26px;
    box-sizing: border-box;
    font-size: 14px;
} */

/* 输入搜索框 */
.el-select>>>.el-input__icon {
    line-height: 36px !important;
}

.el-select>>>.el-input__inner,
.el-input>>>.el-input__inner {
    width: 200px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding-left: 8px;
    box-sizing: border-box;
}

.ZTinpt>span {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.6);
}

.ZTinpt {
    width: 198px;
    padding-left: 16px;
    margin-top: 12px;
    display: inline-block;
}

/* 内容导航区 */
.ZTnav {
    width: 100%;
    height: 93px;
    background-color: #fff;
    margin-top: 2px;
    margin-right: 8px;
}

.zt {
    height: calc(100% - 177px);
}

button {
    cursor: pointer;
}

/* el table */
.sbzt_table {
    height: calc(100% - 57px);
    overflow-y: scroll;
    width: 100%;
}

/* 滚动条样式 */
.sbzt_table::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.sbzt_table::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #3c74e3;
}

.sbzt_table::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #f5f5f5;
}

.sbzt_table>>>.table_key {
    color: #3C74E3;
    cursor: pointer;
}

.sbzt_table .isbind {
    background: url(../../../static/img/393.png) no-repeat;
    background-size: 15px;
    color: #16a951;
    background-position: 0px 3px;
}

.sbzt_table .notbind {
    background: url(../../../static/img/391.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

.sbzt_table .notPut {
    background: url(../../../static/img/392.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

/deep/ .el-table th.el-table__cell.is-leaf,
/deep/ .el-table td.el-table__cell {
    border: none !important;
}

/deep/ .el-table th {
    padding: 0 !important;
    height: 48px !important;

}

/deep/ .el-table th.el-table__cell.is-leaf .cell {
    line-height: 32px;
    border-left: 1px solid #cccccc !important;
}

/deep/ .el-table .el-table__row td {
    padding: 0 !important;
    height: 40px;
}

/deep/ .el-table th:nth-child(1).el-table__cell.is-leaf .cell {
    border: none !important;
}

/deep/ .el-table--border,
.el-table--group {
    border: none;
}

/deep/ .el-table .el-table__row--striped td {
    background-color: #f5f5f5 !important;
}
</style>
